import React, { useState, useEffect } from 'react';
import { Button, Input, message } from 'antd';
import { ShoppingCartOutlined } from '@ant-design/icons';
import { bagBarcodes } from './config';
import './Tools.css';

const Tools = ({ handleAddProduct }) => {
  const [barcode, setBarcode] = useState('');

  const handleAddByBarcode = (barcode) => {
    // console.log('开始处理, 输入的条形码:', barcode);
    handleAddProduct(barcode);
    setBarcode('');
  };

  const handleAddBag = (type) => {
    const barcode = type === 'bigBag' ? bagBarcodes.bigBag : bagBarcodes.smallBag;
    handleAddProduct(barcode);
  }

  return (
    <>
      <div className="tool-buttons-container">
        <div className="left-buttons">
          <Button
            // 移除 primary 样式
            size="large"
            icon={<ShoppingCartOutlined />}
            onClick={() => handleAddBag('bigBag')}
            className="orange-button"
          >
            大购物袋
          </Button>
          <Button
            // 移除 primary 样式
            size="large"
            icon={<ShoppingCartOutlined />}
            onClick={() => handleAddBag('smallBag')}
            className="orange-button"
          >
            小购物袋
          </Button>
        </div>
        <div className="right-input-group">
          <Input
            value={barcode}
            placeholder="输入商品条形码"
            className="barcode-input"
          />
          <Button
            // 改为 primary 样式
            type="primary"
            size="large"
            onClick={handleAddByBarcode}
            className="wide-button"
          >
            添加
          </Button>
        </div>
      </div>
    </>
  );
};

export default Tools;